<template>
	<view class="content" style="border-top: 1px solid #eee;">
		<view class="goods-list" >
			<view class="eva-box"  v-for="item in list">
				<view class="eva_box_top">
					<image class="portrait" :src="item.userInfo.avatar" mode="aspectFill"></image>
					<view class="userInfo">
						<text class="name">{{item.userInfo.nickname}}</text>
					<text class="time">{{$u.timeFormat(item.add_time, 'yyyy-mm-dd')}}</text>
					</view>
					
					<view class="star">
						<u-rate :count="count" v-model="item.score"></u-rate>
					</view>
				</view>
				
				<view class="right">
					
					<view class="con">{{item.content}}</view>
					<view class="img_wrap">
						<view class="img" >
								<image :src="item.images" mode="heightFix"></image>
						</view>
					</view>
					<view class="bot">
						<text class="attr">大包</text><!-- {{item.attr}} -->
					</view>
				</view>
			</view>
		</view>
		<lc-loading :status='loading'></lc-loading>

		
	</view>
</template>

<script>
	import {get_goods_comment,get_sku} from '@/api/index.js'
	export default{
		data(){
			return{
				goods_id:'',
				limit:10,
				// skip:0,
				list:[],
				count: 5,
				loading:'more'
			}
		},
		onLoad({goods_id}) {
			this.goods_id=goods_id
			this.getgoods_comment()
		},
		onReachBottom() {
			if(this.loading==='finished') return
			
			this.getgoods_comment()
		},
		onPullDownRefresh() {
				this.list=[]
				this.getgoods_comment()
			},
		methods:{
			getgoods_comment(){
				// goods_id	string	是	商品ID	5fd723bc23976b000128ddbc
				// skip	string	否		
				// limit	string	是
				let {goods_id,limit} = this
				this.loading='loading'
				let skip = this.list.length
				get_goods_comment({goods_id,limit,skip}).then(res=>{
					if(res.code==1){
						uni.stopPullDownRefresh();
						console.log(res)
						this.list.push(...res.data)
						let len = res.count
						if(skip>=len){
							this.loading='finished'
						}else{
							this.loading='loading'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-rate[data-v-3c5b7be9] {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    margin: 0;
	    padding: 0;
	    touch-action: none;
	    justify-content: flex-end !important;
	}
	page, .content{
		background:#fff;
	}

	/* 商品列表 */
	.goods-list{
		padding: 20rpx 30rpx ;
		.eva-box {
			display: flex;
			padding: 20upx 0;
			flex-wrap: wrap;
			border-bottom: 1px solid #eee;
			.eva_box_top{
				display: flex;
				width: 100%;
			}
			.portrait {
				flex-shrink: 0;
				width: 80upx;
				height: 80upx;
				border-radius: 100px;
				
			}
			.userInfo{
				display: flex;
				height: 80rpx;
				flex-direction: column;
				margin-left: 20rpx;
				justify-content: space-between;
			}
			.star{
				flex: 1;
				text-align: right;
				text{
					color: #aaa;
					&.act{
						color: #e33b2d;
					}
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				font-size: $font-base;
				color: $font-color-base;
				padding-left: 100upx;
				
				.con {
					font-size: $font-base;
					color: $font-color-dark;
					padding: 20upx 0;
				}
				.img_wrap{
					display: flex;
					flex-wrap: wrap;
					
				}
				.img{
					width: 180rpx;
					height: 180rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					image{
						width: 180rpx;
						height: 180rpx;
					}
					
				}
				.bot {
					display: flex;
					justify-content: space-between;
					font-size: $font-sm;
					color: $font-color-light;
				}
			}
		}
	}
	

</style>
